<template>
    <view class="container">
        <view class="header-top">
            <view class="header-top-bg">
                <!--轮播图组件-->
                <swiper></swiper>
            </view>
            <!--状态栏组件-->
            <statusBar class="statusBar" :style="{backgroundColor: statusBarColor}"></statusBar>
            <uni-row>
                <!--导航栏-->
                <view class="nav-box">
                    <view class="nav">
                        <navItem></navItem>
                    </view>
                </view>
            </uni-row>
        </view>
        <view id="main">
            <view class="segmented-bar">
                <uni-segmented-control
                    style-type="text"
                    active-color="#daa96f"
                    :current="current"
                    :values="items"
                    @clickItem="onClickItem"/>
            </view>
            <view id="content">
                <view v-if="current === 0">
                    <text class="content-text">选项卡1的内容</text>
                </view>
                <view v-if="current === 1">
                    <text class="content-text">选项卡2的内容</text>
                </view>
                <view v-if="current === 2">
                    <text class="content-text">选项卡3的内容</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col";
import statusBar from "../../components/statusBar";
import swiper from "../../components/swiper";
import navItem from "../../components/navItem";
import pageJump from "../../common/Jump/pageJump";

export default {
    components: {
        UniCol,
        UniRow,
        statusBar,
        swiper,
        navItem
    },
    data() {
        return {
            statusBarColor: "transparent",
            current: 0,
            items: ["超值推荐", '选项卡2', '选项卡3'],
        }
    },
    onShow() {

    },
    methods: {
        goPage() {
            pageJump.navigateTo("/pages/Test/test");
        },
        onClickItem(e) {
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex
            }
        },
    },
    // 页面滚动生命周期
    onPageScroll(e) {
        if (e.scrollTop > 25) {
            this.statusBarColor = "white";
        }
        if (e.scrollTop < 25) {
            this.statusBarColor = "transparent";
        }
    },
}
</script>

<style lang="less" scoped>
.header-top {
    width: 100%;
    height: 710rpx;
    position: relative;
}

.header-top-bg {
    background-color: grey;
    width: 100%;
    height: 450rpx;
    position: absolute;
    top: 0px;
    //z-index: -99999;
    overflow: hidden;
}

.statusBar {
    padding-bottom: 20rpx;
    position: fixed;
    width: 100%;
    z-index: 999999;
    transition: all 0.5s;
}

.nav-box {
    height: 330rpx;
    width: 100%;
    position: absolute;
    top: 375rpx;
    background-color: #f5f5f5;
    opacity: 0.88;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    overflow: hidden;
    //box-shadow: 0 0 5px #cbcbcb;
}

.nav-box > .nav {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}

#main {
    padding: 10rpx;
    border: 1px solid red;
}

.segmented-bar {
    width: 60%;
    margin-left: 20rpx;
}

#content {
    padding: 25rpx;
}
</style>